<template>
  <div>
    <div
      v-empty="!crm.refund.index"
      xs-empty-icon="nopermission"
      xs-empty-text="暂无权限"
      class="crm-container"
    >
      <!-- <div class="header_top">
        <span @click="headIndex = 0" :class="headIndex == 0 ? 'span_act' : ''"
          >全款退款</span
        >
        <span @click="headIndex = 1" :class="headIndex == 1 ? 'span_act' : ''"
          >账单退学</span
        >
      </div> -->

      <c-r-m-new-head
        ref="crmTableHead"
        :crm-type="crmType"
        :sort-data="sortData"
        @filter="handleFilter"
        @handle="handleHandle"
        @scene="handleScene"
        @on-export="exportInfos"
        @on-search="crmSearch"
        title="退款"
        placeholder="请输入VIP学员名称/退款编号"
        main-title="新建退款"
      >
      </c-r-m-new-head>
      <el-tabs v-model="refundCategoryName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="全款退款" name="全款退款"></el-tab-pane>
        <el-tab-pane label="账单退款" name="账单退款"></el-tab-pane>
      </el-tabs>
      <div class="table-container">
        <!-- 列表选择操作 -->
        <c-r-m-new-table-manage
          ref="crmTableManage"
          :crm-type="crmType"
          :sort-data="sortData"
          :activeName="refundCategoryName"
          @handle="handleHandle"
        ></c-r-m-new-table-manage>
        <el-table
          v-loading="loading"
          id="crm-table"
          :row-height="40"
          :data="list"
          border
          :max-height="tableHeight"
          :cell-class-name="cellClassName"
          :header-cell-class-name="headerCellClassName"
          :row-key="`${crmType}Id`"
          class="n-table--border"
          highlight-current-row
          style="width: 100%"
          @row-click="handleRowClick"
          @sort-change="sortChange"
          @header-dragend="handleHeaderDragend"
          @selection-change="handleSelectionChange"
          ref="contract_table"
        >
          <el-table-column
            show-overflow-tooltip
            reserve-selection
            type="selection"
            align="center"
            width="55"
          />
          <el-table-column
            v-for="(item, index) in fieldList"
            :key="index"
            :fixed="index == 0"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :formatter="fieldFormatter"
            sortable="custom"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <template v-if="item.prop == 'checkStatus'">
                <span
                  :style="getStatusStyle(scope.row.checkStatus)"
                  class="status-mark"
                />
                <span>{{ getStatusName(scope.row.checkStatus) }}</span>
              </template>
              <template v-if="item.prop == 'bankCardAddr'">
                <span>{{ getAddr(scope.row.bankCardAddr) }}</span>
              </template>
              <template v-if="item.prop == 'billMoney'">
                <span class="xr-money green">{{
                  scope.row.billMoney || "0"
                }}</span>
              </template>
              <template
                v-if="
                  item.prop != 'checkStatus' &&
                    item.prop != 'bankCardAddr' &&
                    item.prop != 'billMoney'
                "
              >
                {{ fieldFormatter(scope.row, scope.column) }}
              </template>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="120"
            v-if="crm[crmType].checkOkEdit"
          >
            <template slot-scope="scope">
              <el-button type="primary" @click="editInfo(scope.row)"
                >全局编辑</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            :resizable="false"
            fixed="right"
            width="40"
            v-if="refundCategoryName != '账单退款'"
          >
            <template slot="header" slot-scope="slot">
              <field-set :crm-type="crmType" @change="setSave" />
            </template>
            <template slot-scope="scope">
              <span style="opacity:0">---</span>
            </template>
          </el-table-column>
          <!-- <wk-empty
            slot="empty"
            :props="{
              buttonTitle: '新建退款',
              showButton: saveAuth,
            }"
            @click="createClick"
          /> -->
        </el-table>
        <div class="p-contianer">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size.sync="pageSize"
            :total="total"
            :pager-count="5"
            class="p-bar"
            background
            layout="prev, pager, next, sizes, total, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <span v-if="moneyPageData" class="money-bar">
            {{
              `${
                refundCategory == "账单退款"
                  ? "补款金额: " + moneyPageData.billMoney || 0 | separator
                  : "退款金额: " + moneyPageData.refundMoney || 0 | separator
              }`
            }}
          </span>
        </div>
      </div>
    </div>
    <!-- 相关详情页面 -->
    <c-r-m-all-detail
      :visible.sync="showDview"
      :crm-type="rowType"
      :id="rowID"
      class="d-view"
      @handle="handleHandle"
    />

    <!-- 新建 -->
    <refund-create
      v-if="createShow"
      @close="createShow = false"
      @save-success="handleHandle"
    />

    <extend-info
      v-if="isExtendInfo"
      :action="{ type: 'update', id: rowID, batchId: detailData.batchId }"
      :crm-type="crmType"
      @save-success="handleHandle"
      @close="isExtendInfo = false"
    >
    </extend-info>

    <!-- 审批流升级提醒 -->
    <!-- <approval-flow-update-dialog /> -->
  </div>
</template>

<script>
import RefundCreate from "./Create";
import CRMAllDetail from "@/views/crm/components/CRMAllDetail";
import ExtendInfo from "./refundPool/index";

import { crmRefundReadAPI } from "@/api/crm/refund";
import { mapGetters } from "vuex";
import TableMixin from "../mixins/Table";
import { floatAdd } from "@/utils";

export default {
  /** 学员管理 的 回款列表 */
  name: "ReceivablesIndex",
  components: {
    RefundCreate,
    CRMAllDetail,
    ExtendInfo
  },
  mixins: [TableMixin],
  data() {
    return {
      crmType: "refund",
      createShow: false,
      detailData: {},
      moneyData: null, // 列表金额
      headIndex: 0,
      refundCategoryName: "all",
      refundCategory: null,
      // 扩展字段操作
      isExtendInfo: false
    };
  },
  computed: {
    moneyPageData() {
      if (!this.moneyData || JSON.stringify(this.moneyData) == "{}") {
        return null;
      }

      if (this.selectionList.length == 0) {
        return this.moneyData || {};
      } else {
        let money = 0.0;
        let billMoney = 0.0;
        for (let index = 0; index < this.selectionList.length; index++) {
          const element = this.selectionList[index];
          // 1 审核通过的
          if (element.checkStatus == 1) {
            money = floatAdd(money, parseFloat(element.money));
          }
          billMoney = floatAdd(billMoney, parseFloat(element.billMoney));
        }
        return {
          refundMoney: money.toFixed(2),
          billMoney: billMoney.toFixed(2)
        };
      }
    },
    ...mapGetters(["crm"])
  },
  mounted() {},
  methods: {
    /**
     * 通过回调控制class
     */
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (column.property === "number") {
        return "can-visit--underline can-visit--bold";
      } else if (column.property === "money") {
        return "xr-money green";
      } else {
        return "";
      }
    },

    headerCellClassName({ row, column, rowIndex, columnIndex }) {
      if (column.property === "number") {
        return "header-can-visit-backgroud";
      }
      return "";
    },

    /**
     * 新建点击
     */
    createClick() {
      this.createShow = true;
    },
    getAddr(val) {
      if (!val) return;
      let obj = JSON.parse(val);
      let arr = [];
      for (let key in obj) {
        arr.push(obj[key]);
      }
      let newVal = arr.join(",");
      return newVal;
    },

    handleClick(item) {
      if (item.name == "all") {
        this.refundCategory = null;
      } else {
        this.refundCategory = item.name;
      }
      this.$refs.contract_table.clearSelection();
      this.getFieldList("重新赋值");
    },
    // 全局编辑
    editInfo(row) {
      this.rowID = row.refundId;
      crmRefundReadAPI({
        id: this.rowID
      }).then(res => {
        this.detailData = res.data;
        this.isExtendInfo = true;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../styles/table.scss";
@import "../styles/header-top.scss";
.table-container {
  padding-top: 0;
}
/deep/ .el-tabs {
  background-color: #fff;
  padding: 0px 20px 0 20px;
}
/deep/ .el-tabs__item.is-active {
  color: #0066f9;
}
</style>
